import type { FC, ReactNode } from 'react';
import { View, Text } from 'react-native';
import styles from './styles';

type IconTextProps = {
  text: string;
  textFlex?: number;
  iconWidth?: number;
  fontSize?: number;
  fontColor?: string;
  children: ReactNode;
}

const IconText: FC<IconTextProps> = (props) => {
  const {
    fontSize = 13,
    iconWidth = 16,
    fontColor = '#333'
  } = props;

  const iconStyles = [
    styles.icon,
    { width: iconWidth }
  ];

  const textStyles = {
    fontSize,
    color: fontColor,
    flex: props.textFlex
  };

  return (
    <View style={styles.wrapper}>
      <View style={iconStyles}>
        {props.children}
      </View>
      <Text
        style={textStyles}
        numberOfLines={1}
      >
        {props.text}
      </Text>
    </View>
  );
}

export default IconText;